<template>
	<view>
		<view class="wrap">
			<!-- 地址 -->
			<view class="add u-p-t-30 u-p-l-20">
				<view class="left">
					<view class="u-line-1 u-m-b-10" style="font-size: 15px;">广东省东莞市南城区幸福街99号</view>
					<view class="u-line-1" style="color: #acacac;">Jayjaya 13403414349</view>
				</view>
				<view class="right" @click="addAddress">
					<u-icon name="edit-pen-fill" class="uicon"></u-icon>
				</view>
			</view>
			<!-- 地址结束 -->
			<!-- 商品 -->
			<view class="goods" v-for="goods in goodsList">
				<view style="width: 100px; border-radius: 20px; background-color: #FFFFFF;" class="u-p-l">
					<u-image width="85px" height="120px" class="u-p-l-30" :src="goods.goods.cover_url"></u-image>
				</view>
				<view class="goodInfo">
					<view class="title">{{goods.goods.title}}</view>
					<view class="bottom">
						<view class="price">￥{{goods.goods.price}}</view>
						<view class="book_num">×{{goods.num}}</view>
					</view>
				</view>
			</view>
			<!-- 商品结束 -->
		</view>
		<view class="footer">
			<view class="info">
				<view style="font-weight: 500; font-size: 15px; padding-top: 5px;">合计：</view>
				<view class="sum">￥{{totalPrice}}</view>
			</view>
			<u-button style="width: 130px; background-color: #e70f20;" type="primary" shape="circle" class="submit u-m-b-20" @click="submitOrder">提交订单</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsList: [],
				addressList: []// 地址列表
			}
		},
		computed:{
			totalPrice() {
				return this.goodsList.filter((goods) => { //过滤掉没有选中商品
					if (goods.is_checked) {
						return true
					}
				}).reduce((pre, goods) => { //价格累加
					return parseInt(pre) + parseInt(goods.goods.price) * goods.num //乘商品数量
				}, 0)
			}
		},
		onShow(){
			if (this.vuex_token) {
				this.getCartGoods()
				// this.getData()
			}
		},
		methods: {
			addAddress(){
				this.$u.route({
					url:'/pages/cart/address'
				})
			},
			// 获取购物车内商品
			async getCartGoods() {
				const {
					data
				} = await this.$u.api.cartGoods()
				this.goodsList = data
				// console.log(data)
			},
			submitOrder(){
				this.$u.toast('提交成功')
				setTimeout(()=>{
					this.$u.route({
						type:'switchTab',
						url:'/pages/index/index'
					})
				},1500)
			}
			// async getData() {
			// 				const res = await this.$u.api.addressList()
			// 				this.addressList = res.data.map(item => {
			// 					item.show = false
			// 					return item;
			// 				})
			// 			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap{
		background-color: #ffffff;
		.add{
			display: flex;
			justify-content: space-between;
			flex-wrap: noswrap;
			.right{
				padding-right: 20px;
				padding-top: 10px;
			}
		}
		.goods{
			display: flex;
			flex-wrap: noswrap;
			width: 100%;
			background-color: #fafafa;
			margin-top: 20px;
			padding: 0 20px;
			.goodInfo{
				padding-left: 10px;
				.title{
					font-size: 18px;
					font-weight: 600;
				}
				.bottom{
					margin-top: 60px;
					display: flex;
					justify-content: space-between;
					flex-wrap: nowrap;
					.price{
						color: #e70f20;
						font-size: 18px;
					}
					.book_num{
						font-size: 14px;
						margin-right: -60px;
					}
				}
			}
		}
	}
	.footer{
		padding: 20px 20px;
		position: fixed;
		display: flex;
		justify-content: space-around;
		bottom: 0;
		width: 100%;
		height: 68px;
		.info{
			margin-left: 30px;
			padding-top: 10px;
			display: flex;
			justify-content: space-around;
			.sum{
				color: #e80f20;
				font-size: 20px;
			}
		}
		.submit{
			
		}
	}
	
</style>
